flex-basis 属性在任何空间分配发生之前初始化弹性元素的尺寸。此属性的初始值为 auto。如果 flex-basis 设置为 auto，浏览器会先检查元素的主尺寸是否设置了绝对值再计算出它们的初始值。比如说你已经给你的元素设置了 200px 的宽，则 200px 就是这个元素的 flex-basis。

如果你的元素为自动调整大小，则 auto 会解析为其内容的大小。此时你所熟知的 min- 和 max-content 大小会变得有用，弹性盒子会将元素的 max-content 大小作为 flex-basis。下面的实例可以证明这一点。

在这个示例中我们创建了一些固定的盒子，它们的 flex-grow 和flex-shrink 都设置为 0。这里我们看看第一个元素，显式地设置其宽度为 150px，作为主尺寸，即设置 flex-basis 为 150px，而另外两个元素没有设置宽度而是根据它们内容的宽度设置尺寸。

除了 auto 关键字以外，你还可以使用 content 关键字作为 flex-basis 的值。这会导致即使元素设置了宽度，flex-basis 还是会根据内容大小进行设置。你也可以通过设置 flex-basis 为 auto 并确保你的元素没有设置宽度来达到相同的效果，以便它能自动调整大小。

空间分配时，如果你想要弹性盒子完全忽略元素的尺寸就需要设置 flex-basis 为 0。这显式地说明弹性盒子可用抢占所有空间，并按比例进行分配。随着我们继续关注 flex-grow，我们将看到这方面的例子。